<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" href="../../../assert/css/font.css"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css">
    <link href="../../../assert/css/plugin/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../assert/css/plugin/chosen/chosen.css">
    <link href="../../../assert/css/loaders.css" rel="stylesheet">
    <link href="../../../assert/css/plugin/jsTree/themes/default/style.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/jsTree/themes/default/style.css}">
    <link rel="stylesheet" href="../../../assert/css/animate.min.css" th:href="@{/assert/css/animate.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/subpagesCss/detail.css" th:href="@{/assert/css/subpagesCss/detail.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}">
</head>
<body>
<!--删除标签确认框-->
<div class="modal fade" id="tagDelModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">删除标签</h4>
                </div>
                <div class="modal-body">
                    <div style="text-align: center"><span class="fa fa-question-circle"></span>确实要删除 <span
                            id="delName"></span>吗？
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="delBtn">确定</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--提交标注确认框-->
<div class="modal fade" id="bzModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="margin-top: 113px;width: 721px;">
        <div class="modal-content">
            <form method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">确认</h4>
                </div>
                <div class="modal-body">
                    <div style="text-align: center"><span class="fa fa-question-circle"></span>确实要提交标注吗？</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="bzSubmitBtn">确定</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--头部基本信息-->
<fieldset class="base">
    <legend class="on hidden" data-title="概况">
        概况 <span class="fa fa-angle-down"></span>
    </legend>
    <div class="fieldset_box">
        <div class="baseBox" style="overflow: hidden;height:60px;">
            <ul class="baseUl">
                <li style="width:800px;">录音流水号:<span id="audioId" style="max-width:700px;"></span></li>
                <li style="float: right"><button id="reW">重新转写</button></li>
            </ul>
            <ul class="baseUl">
                <li>坐席班组:<span id="seatGroup"></span></li>
                <li>坐席工号:<span id="seatWorker"></span></li>
                <li>姓名:<span id="seatName"></span></li>
                <li>客户归属地:<span id="customerloc"></span></li>
                <li>客户星级:<span id="customerLevel"></span> <i style="cursor:pointer;margin-left:15px;color: #337ab7;" id="baseChange">展开<b class="fa fa-angle-double-down"></b></i></li>
            </ul>
            <ul class="baseUl">
                <li>通话开始时间:<span id="phoneStartTime"></span></li>
                <li>通话结束时间:<span id="phoneEndTime"></span></li>
                <li>通话时长:<span id="timeDur">38</span></li>
                <li>受理号码:<span id="proPhoneNum"></span></li>
                <li>客户号码:<span id="phone"></span></li>
            </ul>
            <ul class="baseUl">
                <li>满意度:<span id="satisfaction"></span></li>
                <li>呼叫类型:<span id="callType"></span></li>
                <li>挂机方:<span id="onHook"></span></li>
                <li style="width:15%">是否重复来电:<span id="reCallFlag"></span></li>
            </ul>
        </div>
        <div class="wave_box">
            <div class="wave">
                <div class="speakerModel-player"></div>
                <div class="waveTime_one"></div>
                <div id="sp-player-wrapper">
                    <div id="sp-player-loadDiv" class="progress progress-striped active"
                         style="display:block;position: absolute;top: 54%;">
                        <div id="sp-player-loadBar" class="progress-bar progress-bar-info" role="progressbar"
                             aria-valuenow="0"
                             aria-valuemin="0" aria-valuemax="100">0%
                        </div>
                    </div>
                </div>
                <div class="btn-group-wrapper">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm" title="播放/暂停" data-action="speakerModel-play-btn"
                                onclick="wave.playPause()" id="playStopTab" style="color:#337ab7"><span
                                class="glyphicon glyphicon-play"></span>
                        </button>
                        <button type="button" class="btn btn-sm" title="停止" data-action="speakerModel-stop-btn"
                                onclick="wave.stop()"><span
                                class="glyphicon glyphicon-stop"></span></button>
                        <button type="button" class="btn btn-sm" title="快退"
                                data-action="speakerModel-skip-backward-btn"
                                onclick="wave.skipBackward(wave.skipLength)"><span
                                class="glyphicon glyphicon-backward"></span></button>
                        <button type="button" class="btn btn-sm" title="快进"
                                data-action="speakerModel-skip-forward-btn"
                                onclick="wave.skipForward(wave.skipLength)"><span
                                class="glyphicon glyphicon-forward"></span></button>
                        <button type="button" class="btn fa fa-search-minus" href="#"
                                onclick="wave.zoomAudioOut()" title="缩小波形"></button>
                        <div class="btn-group" style="width:100px;display: none;"><!-- type="range" 有step限制-->
                            <input id="myPlayer-room-input" min="1" max="100" value="1"
                                   width=100 height=22/>
                        </div>
                        <button type="button" class="btn fa fa-search-plus" href="#"
                                onclick="wave.zoomAudioIn()" title="放大波形"></button>
                        <button type="button" class="btn fa fa-dot-circle-o" href="#"
                                onclick="wave.zoomAudio()" title="全波形"></button>
                        <button type="button" class="btn btn-sm audioBtn prePhone hidden" title="上一条语音"><span
                                class="glyphicon glyphicon-arrow-up"></span></button>
                        <button type="button" class="btn btn-sm audioBtn nextPhone hidden" title="下一条语音"><span
                                class="glyphicon glyphicon-arrow-down"></span></button>

                        <span style="margin-left:20px;">语速：</span><select name="" id="audioSpeed"></select>
                        <span style="margin-left:20px;">总时长：<b id="totalTime">0</b></span>

                        <span style="margin-left:20px;">跳转到:
                            <input type="text" class="waveInput hour" placeholder="时" autocomplete="off" disabled><i class="waveText">时</i>
                            <input type="text" class="waveInput minute" placeholder="分" autocomplete="off" disabled><i class="waveText">分</i>
                            <input type="text" class="waveInput seconds" placeholder="秒" autocomplete="off" disabled><i class="waveText">秒</i>
                            <button id="jumpBtn">跳转</button>
                        </span>
                        <span style="margin-left:20px;">当前时间：<b id="nowTime">0</b></span>
                        <shiro:hasPermission name="IS_NEED_BZ">
                            <span class="needTagging" style="margin-left:20px;padding:5px 15px; background:#337ab7; color:#fff;  cursor:pointer;border:1px solid #d6d6d6;">转写需标注</span>
                        </shiro:hasPermission>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>
<!--底部信息-->
<div class="detail_bottom">
    <fieldset id="tagBox">
        <legend class="on" data-title="标签">
            <span style="margin-right:10px;">标签</span>(
            <b class="typeCode type0"></b><i>话务小结</i>
            <b class="typeCode type1"></b><i>系统 </i>
            <b class="typeCode type2"></b><i>人工 </i>
            )
            <span class="fa fa-angle-up"></span>
        </legend>
        <div class="fieldset_box">
            <shiro:hasPermission name="TAG_BTN">
                <button class="fa-btn btn-primary noPer" title="添加标签" id="plusTag">添加标签</button>
            </shiro:hasPermission>
            <ul class="tags">

            </ul>
        </div>
    </fieldset>
        <fieldset class="audio_box" style="margin-bottom:0px">
            <legend class="on" data-title="录音内容">
                录音内容 <span class="fa fa-angle-up"></span>
            </legend>
            <div class="fieldset_box" style="padding-top: 12px;">
                <button class="btn btn-primary noPer" id="ppBtn" style="display: none;">人工质检</button>
                <ul class="stt_box scrollbar">

                </ul>
            </div>
        </fieldset>
</div>
<!--需要标注模态框-->
<div class="modal" id="needtagModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">转写需标注</h4>
                </div>
                <div class="modal-body">
                    <div class="del-question" style="text-align: center">
                        <span class="glyphicon glyphicon-exclamation-sign"></span>
                        确定转写需标注？
                    </div>

                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button" class="btn btn-primary" id="needtagSave">确定</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:text="${workId}" id="workId" class="hidden"></div>
<div th:text="${serialNumber}" id="serialNumber" class="hidden"></div>
<div th:text="${userIdentity}" id="userIdentity" class="hidden"></div>
<div id="proStatus" class="hidden"></div>
<div id="workName" class="hidden"></div>
<input type="text" id="classify" class="hidden">
<input type="text" id="proSelectModal" class="hidden">

<input type="text" id="modelS" class="hidden">
<input type="text" id="ruleS" class="hidden">
<input type="hidden" id="tagId" value="" class="form-control search_input">
<input type="hidden" id="areaId" value="" class="form-control search_input">
<input type="hidden" id="tagType" value="" class="form-control search_input">

<a id="basePath" th:href="@{/}"></a>
<script src="../../../assert/js/jquery.js"></script>
<script src="../../../assert/js/base.js"></script>
<script src="../../../assert/js/wavesurfer.min.js"></script>
<script src="../../../assert/js/plugin/wavesurfer.timeline.min.js"></script>
<script src="../../../assert/js/plugin/wavesurfer.regions.min.js"></script>
<script src="../../../assert/js/bootstrap.min.js"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="../../../assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../../../assert/js/plugin/toastr/toastr.min.js"></script>
<script src="../../../assert/js/common.js"></script>
<script src="../../../assert/js/plugin/chosen/chosen.jquery.js"></script>
<script src="../../../assert/js/plugin/jsTree/jstree.min.js"></script>
<script src="../../../assert/js/colResizable-1.6.min.js"></script>
<script src="../../../assert/js/jquery.mousewheel.js"></script>
<script src="../../../assert/js/changeTime.js"></script>
<script src="../../../assert/js/detailCommon.js" th:src="@{/assert/js/detailCommon.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>

<script>
    var getData = {//根据id查询单条详情信息
        jumpType:"",
        init: function () {
            getData.getJumpSource();//获取跳转来源
            getData.reWriteInit();//重跑
        },
        getWorkName: function () {
            var id = $("#workId").text();
            $.ajax({
                type: "post",
                url: basePath + "/rest/per-task/get-task-by-id",
                data: {
                    id: id
                },
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data.code == 0) {
                        var dataOne = data.data;
                        if (dataOne && dataOne.workname) {
                            $("#workName").text(dataOne.workname);
                        }

                    } else {
                        toastrCog.error(data.msg, 1000)
                    }
                }
            })
        },
        getWorkStatusAll: function () {
            var workId = $("#workId").text();
            var serialNumber = $("#serialNumber").text();
            $.ajax({
                type: "post",
                url: basePath + "/rest/pending-task-detail/get-work-status-bu-id",
                data: {
                    workId: workId,
                    serialNumber: serialNumber,
                },
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data.code == 0) {
                        $("#proStatus").text(data.data);
                    }
                }
            })
        },
        getJumpSource:function(){
            var href= window.location.href;
            if(href.indexOf("jumpType=audio")>-1){
                getData.jumpType="audio"
            }
        },
        reWriteInit:function(){
            var  addressPort= bs.getSysConfig("RESTT_ADDRESS_PORT").value;
            $("#reW").on("click",function(){
                $(this).html("请求中...请稍后").prop("disabled",true).addClass("on");
                $.ajax({
                    type: "POST",
                    url: basePath + 'rest/common/redirect',
                    dataType: "json",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "addressPort":addressPort,
                        "url":"/ccs/re_stt",
                        "params":[$("#serialNumber").html()]
                    }),
                    async: false,
                    success: function (data) {
                        var code=data.rtnCode;
                        if(code == 0){
                            if(data.data.rtnCode ==0){
                                toastrCog.success("提交成功，请4小时后查看转写更新结果")
                            }else{
                                toastrCog.error(data.data.rtnMsg);
                            }

                        }else{
                            toastrCog.error("操作失败！")
                        }
                    },
                    complete:function(){
                        $("#reW").html("重新转写").prop("disabled",false).removeClass("on");
                    }
                });
            });
        }
    };
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
            var tabW = $(".detail_right").width();
            $(".baseUl li span").each(function(){
                $(this).css({"maxWidth":($(this).parent("li").width()-135)+"px"});
            });
            $(".speakerModel-player").width(winW - 40);
            $("#sp-player-loadDiv").width(winW - 40);
            $(".stt_box").height(winH - $(".base").height()-30 - 60-$("#tagBox").height()-26);
        }
    };

    $(function () {
        getData.init();
        wave.init();
        base.init();
        stt.init();
        tag.init();
        // needTagging.init();
        setTimeout(function(){
            resize.init();
        },200)
    })
</script>
</body>
</html>